{% extends 'base.html' %}
{% load static %}
{% load user_tags %}

  {% block title %}
  <title>远程用户</title>
  {% endblock title %}
  
  {% block css %}
   <link rel="stylesheet" href="{% static 'icheck/skins/all.css' %}">
  {% endblock css %}
  
	{% block navheader %}
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-1">
          <div class="col-12">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">主机管理</li>
              <li class="breadcrumb-item active">远程用户</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
	{% endblock navheader %}
	
		  {% block content %}
          <div class="card content-list">
            <div class="card-header">
              <h3 class="card-title">
				远程用户
				{% if request|has_permission:'远程用户添加' %}
				<a href="{% url 'server:user_add' %}" class="btn btn-sm btn-outline-success ml-2 addsoft"><i class="fas fa-plus fa-sm"></i> 新增</a>
				{% endif %}
				
				{% if request|has_permission:'远程用户删除' %}
				<a href="javascript:void(0)" class="btn btn-sm btn-outline-danger ml-2 addsoft delete-button" onclick="createbatchdeletemodal();"><i class="far fa-trash-alt"></i> 批量删除</a>
				{% endif %}
				
			  </h3>
				<div class="card-tools">
				  <!--button type="button" class="btn btn-tool" data-widget="collapse">
					<i class="fas fa-minus"></i>
				  </button>
				  <button type="button" class="btn btn-tool" data-widget="maximize">
				  <i class="fas fa-expand"></i>
                  </button>
				  <button type="button" class="btn btn-tool" data-widget="remove">
					<i class="fas fa-times"></i>
				  </button-->
				</div>
            </div>
            <!-- /.card-header -->
            <div class="card-body table-responsive">
              <table id="datatables-lists" class="table table-bordered table-hover">
                <thead>
                <tr>
				  {% if request|has_permission:'远程用户删除' %}
				  <th>
					<input type="checkbox" class="checkall">
				  </th>
				  {% endif %}
				  <th>名称</th>
				  <th>用户名</th>
				  <th>已绑定主机数</th>
				  <th>登陆后是否 su 跳转</th>
				  <th>添加时间</th>
				  <th>操作</th>
                </tr>
                </thead>
                <tbody>
				{% for user in users %}
                <tr id="user-{{ user.id }}">
				  {% if request|has_permission:'远程用户删除' %}
				  <td><input type="checkbox" class="checkchild {% if user.remoteuserbindhost_set.all.count != 0 %}disabled{% endif %}" value="{{ user.id }}"></td>
				  {% endif %}
				  
				  <td>{{ user.name }}</td>
				  <td>{{ user.username }}</td>
				  <td>{{ user.remoteuserbindhost_set.all.count }}</td>
				  <td>{% if user.enabled %}<span class="badge badge-success">是</span>{% else %}<span class="badge badge-danger">否</span>{% endif %}</td>
				  <td>{{ user.create_time|date:"Y/m/d H:i:s" }}</td>
				  <td>
				  {% if request|has_permission:'远程用户详细' %}
				  <a href="{% url 'server:user' user.id %}" class="btn btn-primary btn-sm mb-1"><i class="fas fa-list"></i> 详细</a>
				  {% endif %}
				  
				  {% if request|has_permission:'远程用户编辑' %}
				  &nbsp;&nbsp;<a href="{% url 'server:user_edit' user.id %}?next={% if request.META.QUERY_STRING %}{{ request.META.PATH_INFO }}?{{ request.META.QUERY_STRING }}{% else %}{{ request.META.PATH_INFO }}{% endif %}" class="btn btn-info btn-sm mb-1"><i class="far fa-edit"></i> 编辑</a> 
				  {% endif %}
				  
				  {% if request|has_permission:'远程用户删除' %}
					  {% if user.remoteuserbindhost_set.all.count == 0 %}
					  &nbsp;&nbsp;<a href="javascript:void(0)" id="{{ user.id }}" title="{{ user.name }}" onclick="createdeletemodal(this);" class="btn btn-danger btn-sm mb-1"><i class="far fa-trash-alt"></i> 删除</a>
					  {% else %}
					  &nbsp;&nbsp;<a href="javascript:void(0)" class="btn btn-danger btn-sm disabled mb-1"><i class="far fa-trash-alt"></i> 删除</a>
					  {% endif %}
				  {% endif %}
				  
				  </td>
                </tr>
				{% endfor %}
                </tbody>
                <tfoot>
                <tr>
				  {% if request|has_permission:'远程用户删除' %}
				  <th>
					<input type="checkbox" class="checkall">
				  </th>
				  {% endif %}
				  <th>名称</th>
				  <th>用户名</th>
				  <th>已绑定主机数</th>
				  <th>登陆后是否 su 跳转</th>
				  <th>添加时间</th>
				  <th>操作</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
		  
		  <!--删除确认窗口-->
		  <div id="modal-container">
		  </div>
		  
		  {% endblock content %}

{% block js %}
<!-- DataTables -->
<script src="{% static 'adminlte/plugins/datatables/jquery.dataTables.js' %}"></script>
<script src="{% static 'adminlte/plugins/datatables/dataTables.bootstrap4.js' %}"></script>
<script>
	$("#datatables-lists").DataTable({
		language: {
			"sProcessing": "处理中...",
			"sLengthMenu": "显示 _MENU_ 项结果",
			"sZeroRecords": "没有匹配结果",
			"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
			"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
			"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
			"sInfoPostFix": "",
			"sSearch": "搜索:",
			"sUrl": "",
			"sEmptyTable": "无数据",
			"sLoadingRecords": "载入中...",
			"sInfoThousands": ",",
			"oPaginate": {
				"sFirst": "首页",
				"sPrevious": "上页",
				"sNext": "下页",
				"sLast": "末页"
			},
			"oAria": {
				"sSortAscending": ": 以升序排列此列",
				"sSortDescending": ": 以降序排列此列"
			}
		},
		destroy: true,	// 允许重建
		bProcessing:true,  // 表格数据过多处理时显示: sProcessing
		lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]],
		{% if request|has_permission:'远程用户删除' %}
		columnDefs : [ { targets : [0,6], "orderable" : false } ],
		{% else %}
		columnDefs : [ { targets : 5, "orderable" : false } ],
		{% endif %}
		order: [],
		 //scrollY: 480,	// 滚动条
		 //scrollCollapse: true,
		 //jQueryUI: true,
		 stateSave: true,	// 保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。
		 stateDuration: 86400,	// 本地储存(0~更大)还是session储存(-1) 
	});

	// 删除主机用户 - start
	createdeletemodal = function (event) {
		var thisObj = $(event);	//js对象转jquery对象  
		var user_id = thisObj.attr('id');
		var user_name = thisObj.attr("title");
		// 生成弹出框，使用 \ 换行
		$("#modal-container").html('<div id="modal-delete-' + user_id + '" class="iziModal"><div class="container-fluid"><div class="row">\
									<div class="col-12 p-3"><h5 class="text-center mt-3">确定要删除主机用户 "' + user_name + '"？</h5></div><div class="col-6 p-3">\
									<button type="button" class="btn btn-block btn-secondary" data-iziModal-close>取消</button></div><div class="col-6 p-3">\
									<a href="javascript:void(0)"><button type="button" class="btn btn-block btn-success" id="' + user_id + '-yes" title="\
									' + user_name + '" onclick="deletethis(this);">确定</button></a></div></div></div></div>');
		
		// 初始化弹出框
		$("#modal-delete-" + user_id).iziModal({
			iconClass: 'icon-announcement',
			width: 450,
			//padding: 10,
			overlayClose: false,	// 是否允许点击模态窗口的外部来关闭模态窗口。
			closeOnEscape: false, 	// 是否允许通过点击ESC键来关闭模态窗口。
		});
				
		// 打开弹出框
		$('#modal-delete-' + user_id).iziModal('open');
	}
	
		
	deletethis = function(event) {
		toastr.options.closeButton = true;
		toastr.options.showMethod = 'slideDown';
		toastr.options.hideMethod = 'fadeOut';
		toastr.options.closeMethod = 'fadeOut';
		toastr.options.timeOut = 4000;	
		toastr.options.extendedTimeOut = 0;	
		
		var thisObj = $(event);	//js对象转jquery对象
		var user_id = thisObj.attr('id').split("-")[0];
		var user_name = thisObj.attr("title");
		csrfmiddlewaretoken = '{{ request.COOKIES.csrftoken }}';
		$.ajax({
			url: "{% url 'server_api:user_delete' %}",
			async: true,
			type: 'POST',
			dataType: 'json',
			data: {
				'csrfmiddlewaretoken': csrfmiddlewaretoken,
				'id': user_id,
			},
			timeout: 10000,
			cache: true,
			beforeSend: LoadFunction, //加载执行方法
			error: errFunction,  //错误执行方法
			success: succFunction, //成功执行方法
		});
		
		function LoadFunction() {
			//$("#aboutcontent").html('删除中...');
			//alert('删除中');
		};
		
		function errFunction() {
			// 关闭弹出框
			$('#modal-delete-' + user_id).iziModal('close');
			// 消息框
			toastr.error('删除错误 "' + user_name + '"');
		};
		
		function succFunction(res) {
			if (res.code != 200) {
				// 关闭弹出框
				$('#modal-delete-' + user_id).iziModal('close');
				// 消息框
				toastr.error('删除错误 "' + user_name + '": ' + res.err);
			} else {
				// 先销毁 datatable , 动态删除数据后，然后再重建
				var dttable = $('#datatables-lists').DataTable();
				dttable.destroy();
				
				$("#user-" + user_id).remove();
				
				$("#datatables-lists").DataTable({
					language: {
						"sProcessing": "处理中...",
						"sLengthMenu": "显示 _MENU_ 项结果",
						"sZeroRecords": "没有匹配结果",
						"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
						"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
						"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
						"sInfoPostFix": "",
						"sSearch": "搜索:",
						"sUrl": "",
						"sEmptyTable": "无数据",
						"sLoadingRecords": "载入中...",
						"sInfoThousands": ",",
						"oPaginate": {
							"sFirst": "首页",
							"sPrevious": "上页",
							"sNext": "下页",
							"sLast": "末页"
						},
						"oAria": {
							"sSortAscending": ": 以升序排列此列",
							"sSortDescending": ": 以降序排列此列"
						}
					},
					destroy: true,	// 允许重建
					bProcessing:true,  // 表格数据过多处理时显示: sProcessing
					lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]],
					{% if request|has_permission:'远程用户删除' %}
					columnDefs : [ { targets : [0,6], "orderable" : false } ],
					{% else %}
					columnDefs : [ { targets : 5, "orderable" : false } ],
					{% endif %}
					order: [],
					 //scrollY: 480,	// 滚动条
					 //scrollCollapse: true,
					 //jQueryUI: true,
					 stateSave: true,	// 保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。
					 stateDuration: 86400,	// 本地储存(0~更大)还是session储存(-1) 
				});
				
				// 关闭弹出框
				$('#modal-delete-' + user_id).iziModal('close');
				
				// 消息框
				toastr.success('成功删除 "' + user_name + '"');
			}
		};
	}
	// 删除主机用户 - end

	// 批量删除主机用户 - start
	createbatchdeletemodal = function () {
		// 生成弹出框，使用 \ 换行
		$("#modal-container").html('<div id="modal-batch-delete" class="iziModal"><div class="container-fluid"><div class="row">\
									<div class="col-12 p-3"><h5 class="text-center mt-3">确定要批量删除选中的远程用户？</h5></div><div class="col-6 p-3">\
									<button type="button" class="btn btn-block btn-secondary" data-iziModal-close>取消</button></div><div class="col-6 p-3">\
									<a href="javascript:void(0)"><button type="button" class="btn btn-block btn-success" onclick="batchdelete();">确定</button></a></div></div></div></div>');
		
		// 初始化弹出框
		$("#modal-batch-delete").iziModal({
			iconClass: 'icon-announcement',
			width: 450,
			//padding: 10,
			overlayClose: false,	// 是否允许点击模态窗口的外部来关闭模态窗口。
			closeOnEscape: false, 	// 是否允许通过点击ESC键来关闭模态窗口。
		});
				
		// 打开弹出框
		$("#modal-batch-delete").iziModal('open');
	}
	
	batchdelete = function() {
		toastr.options.closeButton = true;
		toastr.options.showMethod = 'slideDown';
		toastr.options.hideMethod = 'fadeOut';
		toastr.options.closeMethod = 'fadeOut';
		toastr.options.timeOut = 4000;	
		toastr.options.extendedTimeOut = 0;	
		
		var ids = new Array();
		$('input[type="checkbox"].checkchild:checked').each(function(){
			var value = $(this).val();   //获取 checked 选中的值
			ids.push(value);
		});
		ids = ids.join(",");
		if (ids == '') {
			// 关闭弹出框
			$("#modal-batch-delete").iziModal('close');
			toastr.error('未选中需要删除的远程用户');
			return false;
		};
		
		csrfmiddlewaretoken = '{{ request.COOKIES.csrftoken }}';
		$.ajax({
			url: "{% url 'server_api:user_delete' %}",
			async: true,
			type: 'POST',
			dataType: 'json',
			data: {
				'csrfmiddlewaretoken': csrfmiddlewaretoken,
				'id': ids,
			},
			timeout: 10000,
			cache: true,
			beforeSend: LoadFunction, //加载执行方法
			error: errFunction,  //错误执行方法
			success: succFunction, //成功执行方法
		});
		
		function LoadFunction() {
			//$("#aboutcontent").html('删除中...');
			//alert('删除中');
		};
		
		function errFunction() {
			// 关闭弹出框
			$("#modal-batch-delete").iziModal('close');
			// 消息框
			toastr.error('批量删除远程用户错误');
		};
		
		function succFunction(res) {
			if (res.code != 200) {
				// 关闭弹出框
				$("#modal-batch-delete").iziModal('close');
				// 消息框
				toastr.error('批量删除远程用户错误: ' + res.err);
			} else {
				// 先销毁 datatable 与 icheck, 动态删除数据后，然后再重建
				var dttable = $('#datatables-lists').DataTable();
				dttable.destroy();
				$('input[type="checkbox"]').iCheck('destroy');
				
				ids = ids.split(',');
				for (let i=0,len=ids.length;i<len;i++) {
					$("#user-" + ids[i]).remove();
				}

				$("#datatables-lists").DataTable({
					language: {
						"sProcessing": "处理中...",
						"sLengthMenu": "显示 _MENU_ 项结果",
						"sZeroRecords": "没有匹配结果",
						"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
						"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
						"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
						"sInfoPostFix": "",
						"sSearch": "搜索:",
						"sUrl": "",
						"sEmptyTable": "无数据",
						"sLoadingRecords": "载入中...",
						"sInfoThousands": ",",
						"oPaginate": {
							"sFirst": "首页",
							"sPrevious": "上页",
							"sNext": "下页",
							"sLast": "末页"
						},
						"oAria": {
							"sSortAscending": ": 以升序排列此列",
							"sSortDescending": ": 以降序排列此列"
						}
					},
					destroy: true,	// 允许重建
					bProcessing:true,  // 表格数据过多处理时显示: sProcessing
					lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]],
					{% if request|has_permission:'远程用户删除' %}
					columnDefs : [ { targets : [0,6], "orderable" : false } ],
					{% else %}
					columnDefs : [ { targets : 5, "orderable" : false } ],
					{% endif %}
					order: [],
					 //scrollY: 480,	// 滚动条
					 //scrollCollapse: true,
					 //jQueryUI: true,
					 stateSave: true,	// 保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。
					 stateDuration: 86400,	// 本地储存(0~更大)还是session储存(-1) 
				});
				
				$('input[type="checkbox"]').iCheck({
					checkboxClass: 'icheckbox_minimal-red',
					increaseArea: '1%'
				});
				$('input[type="checkbox"].disabled').iCheck('disable');				
				$('input[type="checkbox"]').iCheck('uncheck');
				
				// 关闭弹出框
				$("#modal-batch-delete").iziModal('close');
				
				// 消息框
				toastr.success('批量删除远程用户成功');
			}
		};
	}
	// 批量删除主机用户 - end


</script>

<!-- icheck -->
<script src="{% static 'icheck/icheck.min.js' %}"></script>
<script>
	
	$('input[type="checkbox"]').iCheck({
		checkboxClass: 'icheckbox_minimal-red',
		increaseArea: '1%'
	});
	
	$('input[type="checkbox"].disabled').iCheck('disable');
	
	// 以下为全选事件
	$('input[type="checkbox"].checkall').on('ifChecked', function(event){
		$('input[type="checkbox"].checkchild, input[type="checkbox"].checkall').not(".disabled").iCheck('check');
	}).on('ifUnchecked', function(event){
		$('input[type="checkbox"].checkchild, input[type="checkbox"].checkall').not(".disabled").iCheck('uncheck');
	});
	
	$('input[type="checkbox"].checkchild').not(".disabled").on('ifUnchecked', function(event){
		$('input[type="checkbox"].checkall').iCheck('indeterminate');
	});
	
</script>

{% endblock js %}